import React, { Component } from 'react'
import axios from 'axios'
export class Index extends Component {
    state={
        phone:'',
        password:''
    }
    render() {
        let  { password ,phone} = this.state
        return ( 
            <div className="login">
                <h1>网易云音乐</h1> 
                <ul className="mode">
                    <li className="active">账号密码登录</li>
                    <li>手机号登录</li>
                </ul>
                <input type="text" placeholder="账户" className="username" value={phone} onChange={(e)=>this.setState({phone:e.target.value})}  />
                <input type="password" placeholder="密码" className="password" value={password} onChange={(e)=>this.setState({password:e.target.value})}/>
                <div className="forpass">
                    <label className="check"><input type="checkout" className="checkout" />自动登录</label>
                    <a href="/sign" className="forget">忘记密码</a>
                </div>
                <button className="btn" onClick={()=>{this.login()}}>登陆</button>
                <p className="register" onClick={()=>{this.props.history.push('/registry')}} >注册账户</p>
            </div>
        )
    }
    login(){
        let  { password ,phone} = this.state
        if( password === ''||phone===""){
            this.setState({
                password:'',
                phone:''
            })
            return alert('请输入账号密码')
        }
        axios.post('/login',{password ,phone}).then(res=>{
            console.log(res)
            if(res.data.code===1){
                alert('登陆成功')
                localStorage.setItem('token', res.data.token)
                this.props.history.push('/home')
            }else{
                alert('账号密码错误')
            }
        })

        this.setState({
            password:'',
            phone:''
        })
    }
}

export default (Index)
